<template>
  <section class="container-page">
    <template v-for="index in 2">
      <transition
        :name="'page-split-'+index"
        :key="index"
      >
        <div
          class="g-page-split"
          v-if="pageState"
        />
      </transition>
    </template>

    <transition name="page-split-3">
      <div
        class="g-page-split g-page-slot"
        v-if="pageState"
      >
        <section
          v-if="pageState"
          class="page-slot"
        >
          <div class="g-padding">
            <slot>测试内容嘛</slot>
          </div>
        </section>
      </div>
    </transition>

    <transition name="btn-close">
      <span
        v-if="pageState"
        class="btn-close el-icon-close"
        @click="$store.dispatch('page/toogelPage',null)"
      />
    </transition>

  </section>
</template>

<script>
import { mapGetters } from 'vuex';

export default {
  computed: {
    ...mapGetters(['pageState']),
  },
};
</script>

<style lang="less" src="./index.less" scoped></style>
